afterRefreshListIncremental
Description
Fires after an incremental List refresh completes.
What is an Incremental Refresh?
In some applications there are multiple users editing and entering data into one database on a server. As different users make changes, it is useful to be able to refresh the information displayed from that database on the other user's client-side applications. If the server-side database is extremely large, and the a user's connection to the server is not always strong, refreshing data on the client-side could prove extremely time consuming. One way around this problem is to use an "Incremental Refresh", i.e. to send only the new or altered rows of data from the server to the client. This is accomplished by sending a checksum, from each client-side application to the server, of all of the rows that are currently in the list control. The server then uses the checksum to determine which rows have been edited on the server. These are the rows that are then sent back to the client in the response.
Add an Incremental Refresh Button
Open the 'Defined Controls' menu on the UX Controls page. Choose the "List-Detail View-Buttons" option.
Select the list to connect to and check the 'Refresh List (incremental)' option.
Using an afterRefreshListIncremental Event.
Define a List with a Detail View like this one in the Creating a Detail View with a Dirty Control Class guide on the "Dirty control class name" page. For the Data Source you may want to define your own SQL Table from Static Data.
Click on the 'List Detail View-Buttons' option, in the 'Defined Controls' menu,
Select the list control to attach the buttons to. Check 'Save', 'New record', 'Delete record', 'Refresh List (incremental)', 'Synchronize' options.
Highlight the List Control. In the Properties list click on the
button next to the 'List properties'
property to open the List Builder.
Click on the
button next to the 'Events' property under 'Client-side Events'.
Highlight the afterRefreshListIncremental event.
In the Javascript code section add the following
var updated = e.rowsUpdated +' rows updated.\n'; var inserted = e.rowsInserted + ' rows inserted.\n'; var deleted = e.rowsDeleted + ' rows deleted.\n'; alert(updated + inserted + deleted);
Now close the System Event editor and the List Builder. From the toolbar open the component in one browser, here Google Chrome. Choose Full Preview
Without closing the first browser, go back to Alpha Anywhere and open the component in a second browser window, this time using a different browser, like Firefox.
Using a different browser will prevent caching issues.In the first browser make a number of edits, delete a few rows, and add some new ones. By default a dirty edited row will be marked with a yellow triangle, a deleted row with a purple triangle, and a new row with a blue triangle.
Edits in Google ChromeIf you are using one of the built in Northwind field tables you may encounter a series of error messages if you try to delete or add new rows. These errors probably result from issues on the SQL backend, server-side. When Microsoft created the Northwind database, they also included examples of all of the errors you might encounter. As a result, the easiest way to get a SQL database without errors might be to create some Static data first and the convert it into SQL using the settings on the List Builder Data Source pane.Click 'Save' and then 'Synchronize'
Now Open the second browser window and hit the 'Refresh List'' button. Clicking the Refresh button will cause the afterRefreshListIncremental Event to fire and the Javascript defined for this event to be launched. The parameters in the javascript will show you how many rows were deleted, how many were added, and how many were edited.
Parameters
This event passes several parameters when the Javascript code executes: rowsUpdated,rowsInserted,rowsDeleted,listId
See Also